<template>
  <div class="app-container">
    <section  v-if="mode==1">
      <div class="operation-header">
        <el-button type="primary" size="mini" @click="editToggle(2)">
          <i class="el-icon-plus" />
          新增客户
        </el-button>
      </div>
      <!-- @selection-change="handleSelectionChange"-->
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <!-- <el-table-column
          type="selection"
          width="55">
        </el-table-column> -->
        <el-table-column label="序号" sortable width="50">
          <template slot-scope="scope">
            {{ scope.row.sortIndex }}
          </template>
        </el-table-column>
        <el-table-column label="手机" sortable>
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column label="公司" sortable>
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            {{ scope.row.image }}
          </template>
        </el-table-column>
        <el-table-column label="LLL" sortable>
          <template slot-scope="scope">
            {{ scope.row.lll }}
          </template>
        </el-table-column>
        <el-table-column label="备注" sortable>
          <template slot-scope="scope">
            {{ scope.row.category }}
          </template>
        </el-table-column>

        <el-table-column label="排序" >
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.sortOrder" />
          </template>
        </el-table-column>

        <el-table-column label="客服" >
          <template slot-scope="scope">
            {{ scope.row.agentName }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" sortable>
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>

        <el-table-column label="最后更新" sortable>
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editItem(scope.row)">修改</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        v-if="!listLoading"
        style="margin-top: 20px;"
        :current-page="currentPage"
        background
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </section>

    <section class="edit-section" v-if="mode==2">
      <div class="add-new-header">
        <span>
          <i class="el-icon-circle-plus-outline" />
          {{ editTitle }}
        </span>
        <span class="close" @click="editToggle(1)">
          <i class="el-icon-close" />
        </span>
      </div>
      <div class="form">  
        <el-form :model="form" ref="rulesForm" label-width="80px">
          <el-form-item label="手机" prop="phone">
            <el-input class="input" v-model="form.phone" placeholder="请输入手机"></el-input>
          </el-form-item>

          <el-form-item label="公司" prop="company">
            <el-input class="input" v-model="form.company" placeholder="请输入公司"></el-input>
          </el-form-item>

          <!-- <el-form-item label="图片" prop="img">
            <el-input class="input" v-model="form.img" placeholder="请上传图片"></el-input>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              list-type="picture"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP">
              <el-button size="small" type="primary">选择图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif格式图片，且不超过500KB</div>
            </el-upload>
          </el-form-item> -->

          <el-form-item label="LLL" prop="lll">
            <el-input class="input" v-model="form.lll" placeholder="请输入LLL"></el-input>
          </el-form-item>

          
          <el-form-item label="备注" prop="remark">
            <el-input class="input" v-model="form.remark" placeholder="请输入备注"></el-input>
          </el-form-item>

            
          <el-form-item label="客服">
            <el-select style="width: 400px;" filterable v-model="form.customerService">
              <el-option v-for="item in options" :key="item.nickname" :label="item.nickname" :value="item.userId"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
    </section>

    <el-dialog title="客户列表" :visible.sync="dialogVisible">
      <el-table
        :data="returnList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="手机" sortable>
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column label="公司" sortable>
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            {{ scope.row.image }}
          </template>
        </el-table-column>
        <el-table-column label="LLL" sortable>
          <template slot-scope="scope">
            {{ scope.row.lll }}
          </template>
        </el-table-column>
        <el-table-column label="备注" sortable>
          <template slot-scope="scope">
            {{ scope.row.category }}
          </template>
        </el-table-column>

        <el-table-column label="排序" >
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.sortOrder" />
          </template>
        </el-table-column>

        <el-table-column label="客服" >
          <template slot-scope="scope">
            {{ scope.row.agentName }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" sortable>
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>

        <el-table-column label="最后更新" sortable>
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyListModel, getManagerList, getAddCompanyList } from '@/api/custom'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      editTitle: '新增客户',
      listLoading: false,
      mode: 1,
      form: {
        phone: '',
        company: '',
        img: '',
        lll: '',
        remark: '',
        customerService: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      },
      options: [],
      fileList: [],
      dialogVisible: false,
      returnList: []
    }
  },
  created() {
    this.fetchData()
    this.fetchCustomService()
  },
  methods: {
    fetchCustomService() {
      getManagerList().then(res => {
        // console.log(res);
        this.options = res.data
      })
    },
    fetchData() {
      this.listLoading = true
      let params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage
      }
      getCompanyListModel(params).then(res => {
        // console.log(res);
        let { data } = res
        this.listLoading = false
        this.total = data.total
        data.data.forEach((e, i) => {
          e.sortIndex = i+1
        })
        this.list = data.data
      })
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.fetchData()
    },
    editToggle (mode) {
      this.mode = mode
      this.editTitle = '新增客户'
      this.form = {
        phone: '',
        company: '',
        img: '',
        lll: '',
        remark: '',
        customerService: ''
      }
      if (mode == 1) {
        this.fetchData()
      }
    },
    editItem (item) {
      this.mode = 2
      this.editTitle = '编辑客户'
      this.form = {
        phone: item.mobile,
        company: item.company,
        img: item.img,
        lll: item.lll,
        remark: item.category,
        customerService: item.agentName
      }
    },
    async onSubmit() {
      // console.log(this.form);
      let data = {
        mobile: this.form.phone,
        company: this.form.company,
        category: this.form.remark,
        userId: this.form.customerService
      }
      let res = await getAddCompanyList(data)
      // console.log(res);
      if (!res.data) {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.editToggle(1)
        return
      }
      this.returnList = [res.data]
      this.dialogVisible = true
    },
    reset () {
      this.$refs['rulesForm'].resetFields()
    },
    handlePreview(file) {
      // 预览图片逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // 上传成功逻辑
    },
    handleError(err, file, fileList) {
      // 上传失败逻辑
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
}
.operation-header{
  margin-bottom: 20px;
}
.edit-section {
  width: 100%;
  .add-new-header {
    width: 100%;
    background-color: #F8F8F8;  
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    .close {
      font-size: 20px;
      cursor: pointer;
    }
  }
  .form {
    margin-top: 20px;
    .input {
      max-width: 400px;
    }
  }
}

</style>
